<template>
  <div>
    <Row>
      <Col span="24"
           class="echarts-box">
      <v-chart ref="e4" v-if="this.name.length > 0"
               :style="{width:'98%',height: '300px',}"
               :options="options3"
               ></v-chart>
      <div class="typeSanBox" v-else >
                    <div>
                        <img src="../../../assets/images/process-no-data.png" />
                        <span>暂无数据</span>
                    </div>
                </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options3: {}
    }
  },
  props: ["data1","data2", "name"],
  mounted() {

    this.drawLine()
  },
  methods: {
    drawLine() {
      this.options3 = {
        title: {
          text: '新增趋势',
          subtext: '',
          left: 'left',
          textStyle:{
              fontWeight:'bold',
              color:'#697786',
              fontSize:14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.name.length> 0 ? ['待办事件', '逾期事件'] : []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.name
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '待办事件',
            type: 'line',
            //stack: '总量',
            itemStyle: {
              normal: {
                color: '#5B8FF9', //改变折线点的颜色
                lineStyle: {
                  color: '#5B8FF9' //改变折线颜色
                }
              }
            },
            data: this.name.length> 0 ? this.data1 : []
          },
          {
            name: '逾期事件',
            type: 'line',
            //stack: '总量',
            itemStyle: {
              normal: {
                color: '#8cd5c2', //改变折线点的颜色
                lineStyle: {
                  color: '#8cd5c2' //改变折线颜色
                }
              }
            },
            data: this.name.length> 0 ? this.data2 : []
          }
        ]
      }
    }
  }
}
</script>
</script>
<style scoped>
#myChart {
  width: 100%;
}
.echarts-box {
  background: rgba(0, 59, 152, 0.02);
}

</style>